<template>
	<view class="uy-swiper">
		<swiper class="swiper" :style="{'height': `${height}rpx`, 'border-radius': `${radius}px`}" :indicator-dots="false"
			:indicator-color="'rgba(0, 0, 0, .2)'" :indicator-active-color="'#FFFFFF'" :autoplay="true" :interval="3000"
			:duration="1000" :circular="true" @change="changeSwiper">
			<swiper-item class="swiper-item unify-flex" v-for="(item, index) in list" :key="index" @tap="$emit('click', index)">
				<image class="image" :style="{'height': `${height}rpx`}" :src="item[itemKey] || item" mode="widthFix"></image>
			</swiper-item>
		</swiper>
		<!-- 指示灯 -->
		<view class="dots" :style="{'bottom': bottom}" v-if="isIndicatorLight">
			<view class="dot" :style="{'background-color': index === currentSwiper? backgroundColor: ''}"
				:class="{'active-z': (index == currentSwiper)}" v-for="(item, index) in list" :key="index"></view>
				<slot name="dots" />
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			height: {
				type: [Number, String],
				default: 300
			},
			radius: {
				type: String,
				default: ''
			},
			list: {
				type: Array,
				default: () => {
					return []
				}
			},
			itemKey: {
				type: String,
				default: 'image'
			},
			bottom: {
				type: String,
				default: '10px'
			},
			backgroundColor: {
				type: String,
				default: '#FFFFFF'
			},
			isIndicatorLight: { // 指示灯是否显示  默认true
				type: Boolean,
				default: true
			},
			isPreview: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				currentSwiper: 0,
				isCollect: false,
			}
		},
		methods: {
			// 自定义指示灯
			changeSwiper(params) {
				this.currentSwiper = params.detail.current;
			},

			// 菜单操作函数处理事件
			tapCut(e, index) {
				if(!this.isPreview) {
					if(e.target !== '_blank') {
						this.$openPage({
							name: e.url,
							query: {
								data: e
							}
						})
					} else {
						// #ifdef APP-PLUS
						this.$openPage({
							name: 'webView',
							query: {
								data: e.url
							}
						})
						// #endif
						// #ifdef H5
						window.location.href = e.url
						// #endif
					}
				} else {
					let newsList = this.list.map(({image}) => image);
					uni.previewImage({
						current: index,
						urls: newsList,
						loop: true,
						success: res => {}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.uy-swiper {
		position: relative;
		.swiper {
			overflow: hidden;

			.swiper-item {
				overflow: hidden;
			}

			.image {
				width: 100%;
				/* #ifndef APP-NVUE */
				display: block;
				/* #endif */
			}
		}

		// 指示灯数量
		.carousel-num {
			position: absolute;
			bottom: 0;
			right: 0;
			padding: 10rpx 30rpx;
			background-color: rgba($color: #000000, $alpha: .2);
			border-radius: 20rpx 0 0 0;
			color: #FFFFFF;
			font-size: 24rpx;
		}

		/*用来包裹所有的小圆点 */
		.dots {
			margin-bottom: 20rpx;
			display: flex;
			flex-direction: row;
			justify-content: center;
			position: absolute;
			left: 0;
			right: 0;
			margin: auto;
			z-index: 9;
		}

		/*未选中时的小圆点样式 */
		.dot {
			width: 66rpx;
			height: 6rpx;
			border-radius: 12rpx;
			// margin-right: 26rpx;
			background-color: rgba($color: #000000, $alpha: .2);
		}

		/*选中以后的小圆点样式 */

		.active-z {
			width: 66rpx;
			height: 6rpx;
			border-radius: 12rpx;
		}
	}
</style>
